layui.use(['layer','jquery','form'], function(){
    var layer = layui.layer;
    var $ = layui.jquery;
    var ids_ary = [];
    var get_ary = [];
    var remainin_space = 0;
    var used_space = 0;
    var form = layui.form;
    getlist();
    getTypeList();
    $(".serach").click(function () {
        getlist();
    });

    function getlist(){
        $.get('/index/index/getGameList?name='+ $("input[name='name']").val(), function (res) {
            if (res.code){
                let str = '';
                for(let i = 0; i<res.data.length; i++){
                    str += `<tr data-info='${JSON.stringify(res.data[i])}'>
                            <td style="width: 5%" >`;
                    if(ids_ary.includes(res.data[i].id)){
                        str += `<input type="checkbox" class="ids" checked value="${res.data[i].id}">`;
                    }else{
                        str += `<input type="checkbox" class="ids" value="${res.data[i].id}">`;
                    }
                    str += `</td>
                            <td style="width: 50%">${res.data[i].title}</td>
                            <td style="width: 15%">${res.data[i].size}</td>
                        </tr>`;
                }
                $(".commodity_list").html(str);
            } else {
                layer.msg(res.msg);
            }
        });
    }

    function getTypeList(){
        $.get('/index/index/getTypeList', function (res) {
            if (res.code){
                let str = '';
                for(let i = 0; i<res.data.length; i++){
                    str += `<div style="padding:4px 4px 0px 10px; line-height: 20px">
                                <input type="radio" id="radio${res.data[i].id}" name="type" value="${res.data[i].id}" data-size="${res.data[i].size}" > <label for="radio${res.data[i].id}">${res.data[i].title}</label>
                             </div>`;
                }
                $(".type_radio").html(str);
            }else {
                layer.msg(res.msg);
            }
        });
    }

    $(document).on('change','.ids', function () {
        let info = JSON.parse($(this).parent().parent().attr('data-info'));
        if($(this).prop('checked')){
            ids_ary.push(info.id);
            get_ary.push(info);
        }else{
            ids_ary = ids_ary.filter(function(value) {
                return value !== info.id;
            });
            get_ary = get_ary.filter(value => {
                return value.id !== info.id;
            });
        }
        getPriceInfo();
    });
    $(document).on('change','input[name=type]', function () {
        getPriceInfo();
    });
    function getPriceInfo(){
        used_space = 0;
        get_ary.forEach(function(element) {
            used_space += parseFloat(element.size);
        });
        if($("input[name=type]:checked").val()){
            let size = $("input[name=type]:checked").attr('data-size');
            remainin_space = size - used_space;
            $(".data-size").html(size);
            $(".remainin_space").html(remainin_space.toFixed(2));
            $(".used_space").html(used_space.toFixed(2));
        }
    }


    $(".submit").click(function () {

        if(!$("input[name=type]:checked").val()){
           layer.msg('请先选择内存!');
           return false;
        }
        // if(!$("input[name=username]").val()){
        //    layer.msg('请输入收件人名称!');
        //    return false;
        // }
        if(!ids_ary[0]){
            layer.msg('请选择你需要安装的游戏!');
            return false;
        }
        if(remainin_space < 0){
            layer.msg('你选择的游戏容量已经超过卡片剩余容量,请确认是否更换更大容量卡片!');
            return false;
        }


        layer.open({
            type: 1,
            title: '游戏采购信息',
            area: ['80%', '80%'],//弹框大小  屏幕宽度的80%，高度的80%；
            content: $('#biaodan'), //可以使用$('#id,.class')这种方式来指定模板，可以将其理解为指定一个组件，当然也是可以自己去写的,像'<div>我是一个内容</div>'
        })


        
    });

    // 提交事件
    form.on('submit(submitPop)', function(data){
        var field = data.field; // 获取表单字段值
        // 显示填写结果，仅作演示用

        let dataValue = field;
        dataValue.type_id = $("input[name=type]:checked").val();
        dataValue.ids = JSON.stringify(ids_ary)

        // 此处可执行 Ajax 等操作
        var index = layer.load();
        $.post('/index/index/addOrderGoods',dataValue,function (res) {
            if(!res.code){
               layer.msg(res.msg);
            }else{
                layer.msg(res.msg, {
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                },function (){
                    window.location.reload();
                });
            }
            layer.close(index);
        });
        return false; // 阻止默认 form 跳转
    });
});


